<script setup lang="ts" name="BpmnProcessModelAddEdit">
import SettingsDrawer from '../SettingsDrawer/index.vue'
import BpmnProcess from '@/designer/BpmnProcess/views/index.vue'
import { storeToRefs } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { useSettingStore } from '@/store/bpmnProcess/settingStore'
import { xmlStr } from '../../utils'
const dialogVisible = ref(false)
const dialogTitle = ref('')
const result = ref(null)
const SettingsDrawerRef = ref(null)

const settingStore = useSettingStore()

const { editor } = storeToRefs(settingStore)
const modelerStore = useModelerStore()
const { xml } = storeToRefs(modelerStore)
// 显示新建/编辑模块表单抽屉弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    xml.value = xmlStr()
    editor.value.processEngine = v.process
    dialogTitle.value = '编辑流程模型'
    result.value = v
  } else {
    dialogTitle.value = '新增流程模型'
    result.value = null
    xml.value = null
    editor.value.processEngine = 'camunda'
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const closeDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(result.value)
}

const settingDrawerShow = () => {
  SettingsDrawerRef.value.showDrawer()
}
</script>

<template>
  <el-dialog class="flow-dialog" v-model="dialogVisible" fullscreen append-to-body destroy-on-close :show-close="false">
    <template #header>
      <div class="flow-header">
        <div class="left-wrap">
          <h2>{{ dialogTitle }}</h2>
        </div>
        <div class="center-wrap"></div>
        <div class="right-wrap">
          <el-button type="primary" link @click="settingDrawerShow">
            <svg-icon icon="ep:setting"></svg-icon>
          </el-button>
          <el-button type="info" link @click="closeDialog">
            <svg-icon icon="ep:close"></svg-icon>
          </el-button>
        </div>
      </div>
    </template>
    <BpmnProcess></BpmnProcess>
    <SettingsDrawer ref="SettingsDrawerRef"></SettingsDrawer>
  </el-dialog>
</template>

<style scoped lang="scss">
.flow-header {
  display: flex;
  align-items: center;
  height: 54px;

  .left-wrap {
    h2 {
      padding: 0 20px;
      font-size: 16px;
      text-align: center;
    }
  }

  .center-wrap {
    flex: 1;
  }

  .left-wrap,
  .right-wrap {
    .el-button {
      width: 54px;
      height: 54px;

      .el-icon {
        font-size: 20px !important;
      }
    }

    .el-button+.el-button {
      margin-left: 0;
    }
  }
}
</style>
<style lang="scss">
.flow-dialog {
  >.el-dialog__header {
    position: relative;
    padding: 0;
  }

  >.el-dialog__body {
    position: relative;
    padding: 0;
  }
}
</style>
